<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-07-28 09:47:39
 * @LastEditTime : 2023-08-14 10:14:18
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/brandgoods/bale-list.vue
 * @Description  : -大包产品列表
-->
<template>
  <div class="app-container">
    <div class="publicgoods-query-wrapper">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="关键词搜索" prop="keyword" label-width="90px">
          <el-input
            v-model="queryParams.keyword"
            placeholder="关键词搜索"
            @keyup.enter.native="handleQuery"
          ></el-input>
        </el-form-item>
        <el-form-item label="类目" prop="categoryId">
         <treeselect
          style="width: 220px;"
          v-model="queryParams.categoryId"
          :options="categoryList"
          :normalizer="normalizer"
          placeholder="请选择类目"
        />
        </el-form-item>
        <el-form-item label="skuCode" prop="skuCode" label-width="90px">
          <el-input @keyup.enter.native="handleQuery" v-model="queryParams.skuCode" placeholder="skuCode搜索"></el-input>
        </el-form-item>
        <el-form-item label="选择店铺" prop="storeId">
          <el-select v-model="queryParams.storeId" filterable @change="storeChange" placeholder="请选择">
            <el-option
              v-for="dict in storeList"
              :key="dict.id"
              :label="dict.storeUserName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择品牌" prop="brandId">
          <el-select v-model="brandId" filterable multiple placeholder="请选择" clearable>
            <el-option
              v-for="dict in brandList"
              :key="dict.id"
              :label="dict.brandName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品Id" prop="id" label-width="90px">
          <el-input @keyup.enter.native="handleQuery" v-model="queryParams.id" placeholder="产品Id搜索"></el-input>
        </el-form-item>
        <el-form-item label="是否上架" prop="onShelf">
          <el-select v-model="queryParams.onShelf" placeholder="是否上架" clearable>
            <el-option
              v-for="dict in shelfList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="价格区间" prop="productPriceMin">
          <div class="price-query">
            <el-input v-model="queryParams.productPriceMin" placeholder="最低价" oninput="value=value.replace(/[^\d.]/g,'')" ></el-input> 
            <span style="margin: 0 10px">-</span>
          </div>
        </el-form-item>
        <el-form-item label="" prop="productPriceMax">
          <div class="price-query">
            <el-input v-model="queryParams.productPriceMax" placeholder="最高价" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <el-row :gutter="10" class="operation">
      <el-col :span="2" style="text-align: center">
        <el-checkbox v-model="isCheckAll" @change="onCheckAll">全选</el-checkbox>
      </el-col>
      <el-col :span="3" class="operation-item">
        <div @click="handleAllPublish">
          <i class="el-icon-upload2"></i>
          加入个人产品库
        </div>
      </el-col>
      <el-col :span="2" class="operation-item">
        <div @click="handleSort" :class="[ isSort == null && queryParams.orderBy == null ? 'active' : '']">
         综合排序
        </div>
      </el-col>
      <el-col :span="2" class="operation-item">
        <div @click="handlePriceSort">
         价格排序
         <i :class="['el-icon-sort-down', isSort && queryParams.orderBy == 1 ? 'active' : '']"></i>
         <i :class="['el-icon-sort-up', isSort && queryParams. orderBy == 2 ? 'active' : '']"></i>
        </div>
      </el-col>
      <el-col :span="3" class="operation-item">
        <div @click="handleTimeSort">
         上架时间排序
         <i :class="['el-icon-sort-down', !isSort && queryParams.orderBy == 3 ? 'active' : '']"></i>
         <i :class="['el-icon-sort-up', !isSort && queryParams.orderBy == 4 ? 'active' : '']"></i>
        </div>
      </el-col>
    </el-row>
    <div class="goods-list" v-loading="loading">
      <div
        class="goods-list-item"
        v-for="(item, index) in productList"
        :key="index"
      >
        <div class="pCheckbox">
          <el-checkbox
            v-model="item.isChecked"
            @change="onItemChange($event, item)"
          >
          </el-checkbox>
        </div>
        <el-card>
          <div @click="skipDetails(item.id)">
            <div :style="{ padding: '30px' }">
              <img
                :src="(item.imageURLs || '').split(',')[0]"
                class="goods-list-item-image"
              >
              <div class="goods-list-item-info">
                <span class="info-price">{{ item.productPrice || '-' }}</span>
                <div class="info-sku">
                  <div
                    class="info-sku-item"
                    v-for="(skuItem, skuIndex) in item.skuList"
                    v-if="skuIndex < 5"
                    :key="skuIndex"
                  >
                    <img
                      v-if="skuItem.skuImage"
                      class="info-sku-item-img"
                      :src="(skuItem.skuImage.indexOf('http://') === -1 && skuItem.skuImage.indexOf('https://') === -1) ? domain + skuItem.skuImage : skuItem.skuImage"
                    >
                  </div>
                </div>
                <div class="info-title">{{ item.subject || '-'}}</div>
                <div class="info-brandName"><el-tag>品牌：{{ item.expand.brandName }}</el-tag></div>
              </div>
            </div>
            
            <div class="button-wrapper">
              <el-button
                size="mini"
                @click.stop="handlePublish(item)"
              >加入个人产品库</el-button>
            </div>
            
          </div>
          
        </el-card>
      </div>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="系统提示"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
    >
      <span>是否提交刊登产品编号为{{ proSelectIds }}的数据项？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit(1)">提 交</el-button>
        <el-button type="primary" @click="submit(0)">忽略AI制图提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { listCollectProduct, collectProductPublish, getBrandListByStoreId, getStore } from "@/api/gather/collectProduct";
import { selectAlreadyList } from "@/api/gather/collectProductCategory";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "BalegoodsList",
  components: {
    Treeselect
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 价格排序/时间排序
        orderBy: null,
        isBrand: '0',
        keyword: '',
        categoryId: undefined,
        productPriceMin: '',
        productPriceMax: '',
        isGrounding: 1,
        type: 1,
        skuCode: undefined,
        id: undefined,
        templateType: '2',
        storeId: undefined,
        moduleType: '1'
      },
      // 总条数
      total: 0,
      // 列表数据
      list: [],
      isCheckAll: false,//全选
      // 显示搜索条件
      showSearch: true,
      // 价格还是时间排序
      isSort: null,
      // 类目列表
      categoryList: [],
      dialogVisible: false,
      proSelectIds: undefined, // 刊登商品id
      // 品牌列表
      brandList: [],
      brandId: [],
      brandIdList: [],
      // 店铺列表
      storeList: [],
      shelfList: [
        {
          value: '0',
          label: '上架'
        },
        {
          value: '1',
          label: '未上架'
        }
      ],
    }
  },
  computed: {
    ...mapGetters([
      'domain'
    ]),
    productList() {
      let productList = this.list;
      productList.forEach((item) => {
        const imageURLsArr = (item.imageURLs || '').split(';').filter(i => !!i)
        const newArr = []
        imageURLsArr.forEach(val => {
          if (val.indexOf('http://') === -1 && val.indexOf('https://') === -1) {
            newArr.push(store.getters.domain + val)
          } else {
            newArr.push(val)
          }
        })
        item.imageURLs = newArr.toString();
        this.$set(item, "isChecked", false);
      });
      return productList;
    },
  },
  created() {
    this.getGoodsCategory();
    this.getStoreList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.isCheckAll = false;
      listCollectProduct(this.queryParams).then(response => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
     /** 转换类目数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    // 商品类目
    getGoodsCategory() {
      this.loading = true;
      selectAlreadyList().then(response => {
        this.categoryList = this.handleTree(response.data, "id", "parentId");
      });
      this.loading = false;
    },
    // 综合排序
    handleSort() {
      this.isSort = null;
      this.queryParams.orderBy = null;
      this.getList()
    },
    // 价格排序
    handlePriceSort() {
      this.isSort = true
      if(this.queryParams.orderBy == 1)  this.queryParams.orderBy = 2 //上升
      else this.queryParams.orderBy = 1 //下降
      this.getList()
    },
    // 时间排序
    handleTimeSort() {
      this.isSort = false
      if(this.queryParams.orderBy == 3)  this.queryParams.orderBy = 4 //上升
      else this.queryParams.orderBy = 3 //下降
      this.getList()
    },
    // 跳转详情
    skipDetails(id) {
      const params = { v1: id, v2: '0' };
      this.$tab.openPage("产品详情", '/brandgoods/details', params)
    },
    /** 搜索按钮操作 */
    handleQuery() {
      if(this.queryParams.productPriceMin > this.queryParams.productPriceMax) 
      return this.$message({
        message: '请填写正确价格',
        type: 'warning'
      });
      this.queryParams.pageNum = 1;
      if (this.brandId.length > 0) {
        this.queryParams.brandId = this.brandId.toString();
      } else {
        this.queryParams.brandId = this.brandIdList.toString();
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
     // 一键刊登
    handlePublish(row) {
      this.proSelectIds = row.id;
      this.dialogVisible = true;
    },
    // 批量刊登
    handleAllPublish() {
      // 选中数据
      let proSelect = []
      this.list.forEach((item) => {
        if (item.isChecked) {
          proSelect.push(item.id);
        }
      });
      if(proSelect.length < 1) {
        return this.$message({
          message: '请选择',
          type: 'warning'
        });
      } 
      this.proSelectIds  = proSelect.join(",");
      this.dialogVisible = true;
    },
    // 提交
    submit(type) {
      // type 1 提交 0忽略
      const params = {
        isAI: type,
        productId: this.proSelectIds
      }
      collectProductPublish(params).then(res => {
        this.$modal.msgSuccess(res.msg);
        this.getList();
        this.dialogVisible = false;
      }).catch(() => {

      });
    },
     //当点击全选的时候
    onCheckAll(checked) {
      console.log(checked);
      const flag = checked;
      if (flag) {
        this.list.forEach((item) => {
          item.isChecked = true;
        });
      } else {
        this.list.forEach((item) => {
          item.isChecked = false;
        });
      }
    },
    //当点击单个选中的时候
    onItemChange(checked, val) {
      const flag = checked;
      var isAll = true;
      this.list.forEach((item) => {
        if (item.id == val.id) {
          if (flag) {
            item.isChecked = true;
          } else {
            item.isChecked = false;
          }
        }
        if (item.isChecked == false) {
          isAll = false;
        }
      });
      this.isCheckAll = isAll;
    },
    // 获取品牌选择列表
    getBrandListByStoreIdList() {
      getBrandListByStoreId({storeId: this.queryParams.storeId}).then(res => {
        this.brandList = res.data.brandList;
        this.brandIdList = res.data.brandIdList
        this.queryParams.brandId = this.brandIdList.toString();
        this.getList();
      });
    },
    // 获取店铺选择列表
    getStoreList() {
      getStore().then(res => {
        this.storeList = res.data;
        if (this.storeList.length > 0) {
          this.queryParams.storeId = this.storeList[0].id;
        }
        this.getBrandListByStoreIdList();
      });
    },
    storeChange() {
      this.brandId = [];
      this.getBrandListByStoreIdList();
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .publicgoods-query-wrapper {
    margin-bottom: 10px;
    .price-query {
      display: flex;
    }
    .el-radio-button__inner {
      margin: 0 10px;
      border-radius: 4px;
      border: 1px solid transparent;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: #fff;
      border: 1px solid #1890ff;
      color: #1890ff;
      box-shadow: none;
    }
  }
  .operation {
    border-top: 1px solid #DFDFDF;
    border-bottom: 1px solid #DFDFDF;
    padding: 10px 0;
    margin: 20px 0;
    .operation-item {
      position: relative;
      font-size: 14px;
      text-align: center;
      &:before {
        content: '';
        width: 1px;
        height: 16px;
        background-color: #DFDFDF;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
      }
      .el-icon-upload2 {
        color: #FF6A07;
      }
      .active {
        color: #FF6A07;
      }
      div {
        cursor: pointer;
      }
    }
    
  }
  .goods-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .goods-list-item {
      width: calc((100% - 100px) / 5);
      margin: 0 20px 20px 0px;
      cursor: pointer;
      position: relative;
      .pCheckbox {
        position: absolute;
        top: 10px;
        right: 10px;
      }
      .goods-list-item-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
      }
      .goods-list-item-info {
        margin: 0 -10px;
        padding: 20px 0 0;
        .info-price {
          font-size: 16px;
          line-height: 20px;
          height: 20px;
          color: #1890ff;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: block;
        }
        .info-sku {
          display: flex;
          padding-top: 10px;
          height: 55px;
          .info-sku-item {
            width: calc((100% - 48px) / 5);
            height: 45px;
            margin-left: 12px;
            .info-sku-item-img {
              border: 1px solid #999999;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            &:first-child {
              margin-left: 0;
            }
          }
        }
        .info-title {
          font-size: 12px;
          line-height: 16px;
          color: #999999;
          margin-top: 5px;
          display: -webkit-box;
          -webkit-line-clamp:2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 32px;
        }
        .info-brandName {
          font-size: 12px;
          line-height: 16px;
          color: #999999;
          margin-top: 5px;
        }
      }
      &:nth-child(5n + 1) {
        margin-left: 0;
      }
      .el-card__body {
        padding: 0;
      }
      .button-wrapper {
        text-align: right;
        padding: 10px 20px 30px;
        border-top: 1px solid #E3E3E3;
        .el-button {
          border: 1px solid #92A8D1;
          color: #92A8D1;
          padding: 4px 15px;
        }
      }
    }
  }
}
</style>